<template>
	<view class="window-top">
		<view class="window-flex">
			<view class="window-box">
				<scroll-view class="window-scroll" :scroll-y="false">
					<view class="walletHeadBatten" style="width: 100%; height: 100%;">
						<view class="tn-gradient-bg__cool-6 tn-bg-image top-font-title"
							style="width: 100%; display: flex;flex-direction: column;align-items: center;">
							<!-- 顶部占位 -->
							<view :style="'height:' + sConf.tH + 'px;'"> </view>

							<!-- 标题 -->
							<view style="padding: 40px 100px;font-size: large;font-weight: bold;color: #fff;"> 我的收藏夹
							</view>
						</view>
						<scroll-view class="walletSlBlock" scroll-y :style="'height:' + topH + 'px;'"
							@scrolltolower="lastPage">
							<view style="padding: 10px;display: flex;flex-direction: column;gap: 10px;">
								<template v-for="(item, index) in favorData" :key="index">
									<view
										v-if="item.status === 1 && item.product.status === 1 && item.product.is_list === 1"
										style="width: 100%;display: flex;background-color: #fff;border-radius: 10px;padding: 10px;"
										@tap="productChange(item.puid)">
										<image :src="sConf.pics + (item.product.cover ?? [])[0].url" mode="scaleToFill"
											style="width: 100px;height: 120px;"></image>
										<view
											style="height: 100%;padding: 0 10px;display: flex;flex-direction: column;justify-content: space-between;flex: 1;position: relative;">
											<view style="font-weight: bold;">{{ item.product.name }}</view>
											<view style="color: #999;">{{ item.product.jingle.title }}</view>
											<view style="width: 100%;display: flex;justify-content: space-between;">
												<view style="display: flex;">
													<tn-tag v-for="(tag, index) in item.product.tag" :key="index"
														type="info" shape="round" font-size="24" :bg-color="tag.bgcolor"
														:text-color="tag.color">{{ tag.name }}</tn-tag>
												</view>
												<view style="color: #999;">
													<text>库存:{{ item.product.cur_num }}</text>
												</view>
											</view>
											<view style="display: flex;">
												<text
													style="font-weight: bold;color: #dd524d;">￥{{ (item.product.price.price
														/ 100).toFixed(2)}}</text>
												<text
													style="text-decoration: line-through;color: #999;padding-left: 10px;">￥{{ (item.product.price.money
														/ 100).toFixed(2)}}</text>
											</view>

											<tn-icon name="like-lack-fill" size="48" color="#dd524d"
												style="position: absolute;top: 0;right: 0;padding: 10px;"
												@tap.stop="likeChange(item.puid)"></tn-icon>

										</view>
									</view>
								</template>

								<view v-if="favorData === null || favorData.length === 0"
									style="padding: 45px 0;background-color: #fff;border-radius: 5px;">
									<tn-empty mode="list"></tn-empty>
								</view>

							</view>
						</scroll-view>


						<!-- 顶部自定义导航 -->
						<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff"> {{ title }}
						</tn-navbar>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import utils from '@/common/utils';
export default {
	data() {
		return {
			bH: 0,
			title: '悦君玺 • 重庆',
			count: null, // 记录数
			size: 20, // 页大小
			page: 1, // 当前页
			maxPage: 1, // 最大数		
			topH: 0,
			title: '悦君玺 • 重庆',
			sConf: getApp().globalData,
			banner: '/media/images/efc56953-c719-46ec-ad24-1f207516ca9d.jpeg',
			favorData: null,

		}
	},
	onLoad() {
		console.log('onLoad');
		this.loadStaffFavorData()
		this.bH = this.sConf.iH - 200 - 100
	},
	onShow() {

	},
	onReady() {
		console.log('onReady');
		this.designLayout()
	},

	methods: {
		designLayout() {
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.walletHeadBatten').boundingClientRect();
				query.select('.walletSlBlock').boundingClientRect();
				query.exec((res) => {
					console.log('mallt窗口', this.sConf.iH, res[0].top, res[1].top);
					this.topH = this.sConf.iH - res[1].top - this.sConf.tH + 10;
				});
			})
		},
		/**
		 * 加载个人收藏夹
		 */
		loadStaffFavorData() {
			let host = this.sConf.host + '/weapps/favorit/';
			let token = this.sConf.token || '';
			let data = {
				sid: this.sConf.auth.id,
				status: 1,
				page: this.page,
				size: this.size,
			}
			utils.authenticatorList(host, token, data).then((res) => {
				console.log('加载个人收藏夹', res);
				if (res.rescode === 200) {
					if (this.page > 1) {
						this.favorData = this.favorData.concat(res.resmsg)
					} else {
						this.favorData = res.resmsg
					}
					this.count = res.count
					this.size = res.size
					this.maxPage = Math.ceil(res.count / res.size)
				}
			})
		},
		/**
		 * 解除收藏
		 * @param {Object} e
		 */
		likeChange(e) {
			let host = this.sConf.host + '/weapps/favored/';
			let token = this.sConf.token || '';
			let data = {
				sid: this.sConf.auth.id,
				puid: e,
				status: 0
			}
			utils.authenticatorPost(host, token, data).then((res) => {
				console.log('移除个人收藏夹', res);
				if (res.rescode === 200) {
					// this.favorData.find(item => item.puid === e).status = 0
					this.favorData = this.favorData.filter(item => item.puid !== e)
				}
			})
		},
		/**
		 * 产品导航
		 * @param {Object} e
		 */
		productChange(e) {
			uni.redirectTo({
				url: '/pageb/puctplay/puctplay?puct=' + e
			})
		},
		/**
		 * 下一页
		 */
		lastPage() {
			console.log('lastPage');
			if (this.page < this.maxPage) {
				this.page++
				this.loadStaffFavorData()
			}
		}
	}
}
</script>

<style lang="scss" scoped></style>